<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>tl-rtc-file</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script src="/static/layui/layui.js" v="layui" e="layui"></script>
    <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" />
    <link href="/image/44826979.png" rel="shortcut icon" type="image/x-icon">
</head>

<style>
    body{
        font-family: Rubik,Fallback;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(to right, #C5EDFF, #E6F7FF, #E6F7FF, #E6F7FF, #E6F7FF, #C5EDFF, #C5EDFF);
    }
    .layui-nav{
        text-align: right;
        border-radius: 0;
        background: none;
        display: inline-flex;
        float: right;
    }
    .tl-rtc-file-logo{
        left: 10px;
        top: 15px;
        font-size: 20px;
        font-weight:bolder; 
        -webkit-text-stroke:1px black;
        -webkit-text-fill-color:transparent;
        position: absolute;
        z-index: 10000;
    }
    .tl-rtc-file-github-logo{
        width: 24px;
        height: 24px;
        margin-top: 16px;
        margin-left: -30px;
    }
    .tl-rtc-file-intro-content{
        padding: 150px 12px 120px 12px;
        text-align: center;
    }
    .tl-rtc-file-intro-main{
        color: black;
        font-size: 36px;
        font-weight: 300;
    }
    .tl-rtc-file-intro-tag{
        margin-top: 30px;
        color: black;
        font-size: 25px;
        font-weight: 300;
        width: 70%;
        margin-left: 15%;
    }
    .tl-rtc-file-foot-content{
        position: absolute;
        bottom: 10px;
        padding-top: 20px;
        padding-bottom: 20px;
        margin-top: 20px;
        right: 30px;
        line-height: 25px;
        border-top: 1px solid #e8e8e8;
        font-size: 14px;
        font-weight: 800;
        color: #5c5555;
        text-align: right;
    }
    .tl-rtc-file-goto{
        margin-top: 10px;
        text-align: center;
        transition: margin-top 1s;
    }
    .tl-rtc-file-goto-btn{
        width: 20%;
        padding: 0 25px;
        background-color: #5963af;
        border: 0;
        font-weight: bold;
        outline: none;
        border-radius: 25px;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center;
        height: 50px;
        line-height: 50px;
        cursor: pointer;
        box-shadow: 0 0px 20px rgb(0 0 0 / 40%);
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        min-width: 110px;
        max-width: 200px;
        transition: width 1s;
    }

    @media screen and (max-width: 480px) {
        .tl-rtc-file-goto{
            margin-top: -40px;
        }
        .tl-rtc-file-intro-main{
            font-size: 28px;
        }
    }

    .layui-layer-title{
        border-top-right-radius: 8px;
        border-top-left-radius: 8px;
    }
    
    .layui-layer, .layui-layer-content{
        border-radius: 8px;
    }

    .layui-layer-content{
        border-bottom-right-radius: 8px;
        border-bottom-left-radius: 8px;
    }

    .layui-nav .layui-nav-item a {
        padding: 0 10px;
    }

    .layui-nav{
        padding: 0;
    }

</style>

<body class="layui-layout-body">

    <a href="#" class="tl-rtc-file-logo" > tl-rtc-file </a>
    <ul class="layui-nav">
        <li class="layui-nav-item" ><a style="color: black; font-weight: bold;" href="/document">文档</a></li>
        <li class="layui-nav-item"><a target="_blank" onclick="donate()" style="color: black; font-weight: bold;">捐赠</a></li>
        <li class="layui-nav-item"><a target="_blank" onclick="donateDev()" style="color: black; font-weight: bold;">定制开发</a></li>
        <li class="layui-nav-item" ><a style="color: black; font-weight: bold;" href="home_en.html">EN</a></li>

        <li class="layui-nav-item">
            <a href="https://github.com/iamtsm/tl-rtc-file" style="margin-left: 20px;" target="_blank">
                <svg class="tl-rtc-file-github-logo" viewBox="0 0 1024 1024" p-id="1341" width="128" height="128">
                    <path d="M512 42.666667A464.64 464.64 0 0 0 42.666667 502.186667 460.373333 460.373333 0 0 0 363.52 938.666667c23.466667 4.266667 32-9.813333 32-22.186667v-78.08c-130.56 27.733333-158.293333-61.44-158.293333-61.44a122.026667 122.026667 0 0 0-52.053334-67.413333c-42.666667-28.16 3.413333-27.733333 3.413334-27.733334a98.56 98.56 0 0 1 71.68 47.36 101.12 101.12 0 0 0 136.533333 37.973334 99.413333 99.413333 0 0 1 29.866667-61.44c-104.106667-11.52-213.333333-50.773333-213.333334-226.986667a177.066667 177.066667 0 0 1 47.36-124.16 161.28 161.28 0 0 1 4.693334-121.173333s39.68-12.373333 128 46.933333a455.68 455.68 0 0 1 234.666666 0c89.6-59.306667 128-46.933333 128-46.933333a161.28 161.28 0 0 1 4.693334 121.173333A177.066667 177.066667 0 0 1 810.666667 477.866667c0 176.64-110.08 215.466667-213.333334 226.986666a106.666667 106.666667 0 0 1 32 85.333334v125.866666c0 14.933333 8.533333 26.88 32 22.186667A460.8 460.8 0 0 0 981.333333 502.186667 464.64 464.64 0 0 0 512 42.666667" fill="#000000" p-id="1342"></path>
                </svg>
            </a>
        </li>
    </ul>

    <div class="tl-rtc-file-intro-content">
        <div class="tl-rtc-file-intro-main">
            基于webrtc的媒体流传输工具
        </div>
        <div style="margin-top: 30px;">
            <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/tl-open-source/tl-rtc-file?style=social">
            <img alt="GitHub forks" src="https://img.shields.io/github/forks/tl-open-source/tl-rtc-file?style=social">
        </div>
        <div class="tl-rtc-file-intro-tag">
            <span class="layui-badge layui-bg-blue">文件传输</span>
            <span class="layui-badge layui-bg-black">文件暂存</span>
            <span class="layui-badge layui-bg-green">音视频通话</span>
            <span class="layui-badge layui-bg-orange">远程屏幕共享</span>
            <span class="layui-badge layui-bg-cyan">本地屏幕录制</span>
            <span class="layui-badge layui-bg-black">文字传输</span>
            <span class="layui-badge layui-bg-blue">公共聊天</span>
            <span class="layui-badge layui-bg-gray">智能AI体验</span>
            <span class="layui-badge layui-bg-gray">后台管理</span>
            <span class="layui-badge layui-bg-orange">机器人告警</span>
            <span class="layui-badge layui-bg-cyan">...</span>
        </div>
    </div>


    <div class="tl-rtc-file-goto">
        <a href="/" target="_blank">
            <button type="button" class="layui-btn tl-rtc-file-goto-btn" style="letter-spacing: 4px;">
                立即体验
            </button>
        </a>
    </div>

    <div class="tl-rtc-file-foot-content">
        <a href="https://github.com/iamtsm" target="_blank">Copyright @ 2021 ~ 2023 iamtsm</a>
    </div>

</body>

<script>
    layui.use(['layedit'], function () {
        window.layer = layui.layer;
    });
    window.donate = function(){
        if(window.layer){
            layer.open({
                type: 1
                , title: false
                , closeBtn: false
                , area: ["300px","300px"]
                , shade: 0.5
                , shadeClose : true
                , id: 'layui-info-msg'
                , content: '<img src="https://im.iamtsm.cn/image/coffee.jpeg" style="width: 100%; height: 100%;"></img>'
            });
        }
    }
    window.donateDev = function(){
        if(window.layer){
            layer.open({
                type: 2
                , title: false
                , closeBtn: false
                , area: ['80%','80%']
                , shade: 0.5
                , shadeClose : true
                , id: 'layui-info-msg'
                , content: 'pay.html'
            });
        }
    }
</script>

</html>